<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body{
            background: url(https://img95.699pic.com/photo/40100/7059.gif_wh860.gif )
            no-repeat;
            background-size: cover;
        }
        fieldset {
            width: 600px;
            margin: 150px auto;
            border: 0px;
            padding: 30px;
            color: white;
        }
        .el-form-item label{
            color: white;
        }
        .el-form-item label:hover{
            color: red;
        }
        .el-input:hover{
            width: 500px;
            height: 25px;
        }

    </style>
</head>
<body>
<div id="app">
    <fieldset>
        <legend>用户注册</legend>

        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="100px" class="demo-ruleForm">

            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="info.nickname"></el-input>
            </el-form-item>

            <el-form-item label="账号" prop="username">
                <el-input v-model="info.username"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="info.password" show-password></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="repeatpassword">
                <el-input type="password" v-model="info.repeatpassword" show-password></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="telephone">
                <el-input v-model="info.telephone"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="info.code">
                    <el-button slot="append" @click="sendCode()">发送验证码</el-button>
                </el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="register('info')">提交</el-button>
                <el-button @click="resetForm('info')">重置</el-button>
                <el-button @click="back()">返回登录</el-button>
            </el-form-item>
        </el-form>
    </fieldset>
</div>
<script>
    var haha = new Vue({
        el:"#app",
        data:{
            isok:-1,
            info:{},
            rules: {
                telephone: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'},
                ],
                username: [
                    {required: true, message: '请输入用户名号', trigger: 'blur'},
                ],
                nickname: [
                    {required: true, message: '请输入昵称', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                repeatpassword: [
                    {required: true, message: '请再次输入密码', trigger: 'blur'},
                    {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ]
            }
        },
        methods:{
            sendCode(){
                if( haha.info.telephone == null ){
                    haha.$message.error('请输入手机号');
                }
                $.get("/ssm/admin/sendCode?telephone="+haha.info.telephone,function (backData) {

                });
            },
            back(){
                window.location.href = "/ssm/index.html";
            },
            register(info){
                haha.$refs[info].validate((valid) => {

                    if( haha.info.nickname == null ){
                    haha.$message.error('请输入昵称');
                    return;
                }else if( haha.info.username == null ){
                    haha.$message.error('请输入账号');
                    return;
                }else if( haha.info.password == null ){
                    haha.$message.error('请输入密码');
                    return;
                }else if( haha.info.repeatpassword == null ){
                    haha.$message.error('请再次输入密码');
                    return;
                }else if( haha.info.password != haha.info.repeatpassword ){
                    haha.$message.error('两次密码不一致，请确认后输入');
                    return;
                }else if( haha.info.telephone == null ){
                    haha.$message.error('请输入手机号');
                    return;
                }else if( haha.info.code == null ){
                    haha.$message.error('请输入验证码');
                        return;
                }
                $.post("/ssm/admin/add",haha.info,function (backData) {
                    if( backData.code ==1 ){
                        haha.$message.success('恭喜您注册成功');
                    }else{
                        haha.$message.error(backData.msg);
                    }
                });
            });
            },
            resetForm(info) {
                haha.$refs[info].resetFields();
            }
        }
    });
</script>
</body>
</html>

